var React = require('react');
var _ = require("underscore");
require("./comment-star.scss");

var CommentStar = React.createClass({
  propTypes:{
    score    : React.PropTypes.number ,
    scoreArr : React.PropTypes.array ,
    width    : React.PropTypes.number ,
    height   : React.PropTypes.number ,
    subClassName :  React.PropTypes.string
  },
  parseNumber:function( strOrNumber ){
    if( _.isNaN(Number( strOrNumber ))){
      return 0
    }
    return Number( strOrNumber ) / 5 * 100 + "%" ;
  },
  render:function(){
    var percent      = this.parseNumber( this.props.score ) ;
    var { scoreArr,width,height,subClassName } = this.props ;
    return (<div className="star-line" style={{ width ,height }}>
      <div className="star-base" style={{ width : percent }}></div>
      <div className={ subClassName ? "star-cover " + subClassName : "star-cover " }></div>
      {
        scoreArr ? <CommentDetail scoreArr={ scoreArr }/> : null
      }
    </div>)
  }
});

var CommentDetail = React.createClass({
  propTypes:{
    scoreArr : React.PropTypes.array
  },
  getText:function(index){
    var textArr = [
      "商品质量",
      "描述相符",
      "店铺服务",
      "物流服务"
    ] ;
    return textArr[ index ]
  },
  render:function(){
    var { scoreArr } = this.props ;
    return( <div className="star-detail">
      <h2>评分详情</h2>
      {
        _.map( scoreArr,function(score,index){
          return <div key={_.uniqueId("_cm")} className="star-detail-line">
            <span>{this.getText( index )}：</span><CommentStar width={120} height={24} score={ score } subClassName={"white"}/>
          </div>
        }.bind( this ) )
      }
    </div>)

  }
});

module.exports = { CommentStar,CommentDetail};